<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            position: absolute;
            top: 100px;
            left: 50%;
            transform: translateX(-50%); 
            /* 往本省的宽度走一半 */
        }
        select{
            width: 200px;
            height: 38px;
        }
    </style>
    <script src="js/data.js"></script>
</head>
<body>
    <div class="box">
        <!-- 省  province -->
        <select  id="province">
            <!-- <option value="">山东</option>
            <option value="">河南</option>
            <option value="">上海</option>
            <option value="">北京</option>
            <option value="">江苏</option> -->
        </select>
        <!-- 地级市 -->
        <select  id="city">
            <!-- <option value="">济南</option>
            <option value="">青岛</option>
            <option value="">烟台</option>
            <option value="">济宁</option>
            <option value="">深圳</option> -->
        </select>
        <!-- 区县 -->
        <select  id="area">
            <!-- <option value="">历下区</option>
            <option value="">市中区</option> -->
        </select>
    </div>
    <script>
        // 1.获取省市区 dom元素
        var province = document.getElementById('province');
        var city = document.getElementById('city');
        var area  =document.getElementById('area');
        
        //渲染省份
        render(province,data)
        
        //给省份绑定点击事件
        province.addEventListener('click',function(){
            // 获取当前你点击了哪个省份的下标  下标=索引号
            // -1 的原因市以为新增了一项 请选择 这段文字 所以要退后一步
            var pIndex = province.selectedIndex -1;

            // 获取地级市  这就是你点击的那个省份 的城市。
            // console.log(data[pIndex].cityList);

            //渲染当前省份下的地级市
            render(city,data[pIndex].cityList)

            //重置区县  这里当用户需要重新选择的时候 就要清空区县
            area.innerHTML= '';  
        })


        city.addEventListener('click',function(){
            // 获取当前点击省份的下标  下标=索引号
            var cIndex = city.selectedIndex -1;
            // 获取地级市 这就是你点击的哪个城市 在控制台可以看到
            console.log(cIndex);
            //当点击了地级市之后 获取到区的对应信息
            console.log(data[province.selectedIndex-1].cityList[cIndex]);

            //当前城市的区县
            var areaList = data[province.selectedIndex-1].cityList[cIndex].areaList
            console.log(areaList,'区县');  //这里这个区县不影响 

            // 渲染当前区县
            render(area,areaList);
        })


        // 根据data数据渲染省份 我们肯定还要这样子去渲染地级市区县的 所以我们把这段代码封装起来
        // 封装渲染省市区 渲染方法 函数四要素：1，参数 2.返回值 3.功能 4.何时调用
        function render(ele,List){
            ele.innerHTML =  `<option>请选择</option>` + List.map(function(item){
            return  `<option>${item.name || item}</option>`;
        })
        //  map可以返回我需要的内容 遍历； item 表示数组的每一项
        };
      
       
    </script>
      <!--
       关于${} 模板字符串 可以插入自己需要的内容 
    我对这里的理解 就是 province 的内容通过innerHTML更改 innerHTML的值 就是取余data.js文件的数组 map可以用函数遍历数组 item是数组的每一项名字
    最后返回值 利用模板字符串 ${} 里面的内容就是要返回的值。 -->
</body>
</html>